<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">物流信息</block>
		</cu-custom>
		<view class="cu-timeline" v-if="list.length">
			<view :class="['cu-item', i.textName]" v-for="(i, k) in list" :key="k">
				<view :class="['content', 'shadow-blur', i.className]">
					<view class="cu-capsule">
						<view class="cu-tag bg-white">
							<text class="icon-time"></text>
						</view>
						<view class="cu-tag line-white">{{ i.time }}</view>
					</view>
					<view class="margin-top-xs">{{ i.context }}</view>
				</view>
			</view>
		</view>		
		<empty-data src="/static/logistics.png" v-else>暂无物流信息</empty-data>
	</view>
</template>

<script>
	import { expressData } from '@/common/api/users'
	export default {
		name: 'express',
		onLoad (options) {
			let { postid, expressname, batchcode } = options
			this.getInfo(batchcode, postid, expressname)
		},
		data () {
			return {
				list: [],
				ng: [
					'bg-red',
					'bg-orange',
					'bg-pink',
					'bg-brown',
					'bg-grey',
					'bg-black',				
					'bg-yellow',
					'bg-olive',
					'bg-green',
					'bg-cyan',					
					'bg-blue',
					'bg-purple',
					'bg-mauve'
				]
			}
		},
		methods: {
			getInfo(batchcode, postid, expressname) {
				uni.showLoading({ mask: true })
				expressData({ batchcode, postid, expressname }).then(res => {
					uni.hideLoading()
					if (+res.status === 200) {
						this.list = res.data.map((item, k) => {
							item.className = 'bg-grey'
							item.textName = 'text-grey'
							return item
						})
					} else {
						uni.showModal({
							content: res.message,
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less';
</style>
